import { View } from 'react-native';
import { StyleSheet } from 'react-native';

// 当flex与width同时存在时
// flex为0时，width生效
// flex为有效值时，width不生效
function initStyle(currentFlex, style = {}) {
  const {
    width,
    // 优先使用形参flex
    flex = currentFlex,
    ...result
  } = style;
  // 当存在width则优先级最高
  if (width) {
    result.width = width;
  } else {
    result.flex = flex;
  }
  return result;
};
export default {
  isJiess: true,
  name: 'BaseCell',
  setup({
    boxStyle,
    rowStyle,
    leftStyle,
    middleStyle,
    rightStyle,
    flexs = [0, 1, 0],
    fullScreen = false
  }) {
    const styles = StyleSheet.create({
      boxStyle: {
        // 是否撑满整个屏幕
        flex: fullScreen ? 1 : 0,
        flexDirection: 'column',
        borderBottomWidth: 1,
        borderBottomColor: 'red',
        ...boxStyle
      },
      rowStyle: { flexDirection: 'row', ...rowStyle },
      leftStyle: initStyle(flexs[0], leftStyle),
      middleStyle: initStyle(flexs[1], middleStyle),
      rightStyle: initStyle(flexs[2], rightStyle),
    });

    this.add(
      this.render({ is: View, style: styles.boxStyle },
        this.render({ is: View, style: styles.rowStyle },
          this.render({
            is: View,
            style: styles.leftStyle
          }, this.slot('left')),
          this.render({
            is: View,
            style: styles.middleStyle
          }, this.slot('middle')),
          this.render({
            is: View,
            style: styles.rightStyle
          }, this.slot('right'))
        ),
        this.slot('bottom')
      )
    );
  },
};
